<template>
  <div class="wrapper">
    <el-table 
      :data="store.data" 
      style="width: 100%" 
      v-bind="$attrs" 
      v-on="$listeners" 
      @selection-change="handleSelectionChange" 
      v-loading="this.store.loading"
    >
      <slot></slot>
      <template #empty>
        <div>
          <p>暂无数据</p>
          <el-button @click="retry">重试</el-button>
        </div>
      </template>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="100"
      @current-change="currentChange"
      >
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'StoreTableComp',
  props: ['store','dataLabel'],
  provide(){
    return {
      'store': this.store,
      'editorIndex': this.editorIndex
    }
  },
  async created(){
    if(this.store && this.store.autoLoad){
      await this.store.loadData()
    }
  },
  data(){
    return {
      editorIndex: []
    }
  },
  methods:{
    // 选中功能 将选中的表格提交至后端
    handleSelectionChange(val){
      console.log(val);
    },
    currentChange(val){
      this.store.page = val
      this.store.pageSize = 10
      this.store.loadData()
    },
    retry(){
      this.store.loadData()
    }
  }
}
</script>